<template>
  <div style="background-color: #f5f5f5; min-height: 100vh">
    <div style="padding-top: 10px">
      <i class="el-icon-back" style="margin-left: 10px; font-size: 24px; cursor: pointer" onclick="window.history.back()">&nbsp;返回</i>
      <input style="margin-left:50px; font-size: 20px; width: 60%; border-radius: 15px; height: 60px; line-height: 60px; text-align: center" v-model='title' type="text"></input>
      <el-popover
          placement="bottom"
          title="发布文章"
          width="500"
          trigger="click"
          style="font-weight: bolder"
      >
        <div style="height: 60vh">
          <el-form label-position="right" label-width="120px">
            <el-form-item label="添加标签:">
              <label slot="label"><span style="color: red">* </span>添加标签:</label>
              <el-select v-model="tagValues" multiple placeholder="请选择" style="width: 100%">
                <el-option
                    v-for="item in tagOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文章封面:">
              <label slot="label"><span style="color: red">* </span>文章封面:</label>
              <div style="width: 100%">
                <div class="img-show" v-if="imgUrl">
                  <img :src="imgUrl" class="avatar" style="height: 200px; width: 300px">
                  <span class="actions">
                    <!-- 放大 -->
                    <span class="item">
                      <i class="el-icon-zoom-in" @click="enlarge()"></i>
                    </span>
                    <!-- 删除 -->
                    <span class="item">
                      <i class="el-icon-delete" @click="del()"></i>
                    </span>
                  </span>
                </div>
                <!-- 图片上传 -->
                <!--                todo 调用文件上传接口， 设置url-->
                <el-upload
                    v-else
                    action="#"
                    class="uploader-avatar"
                    list-type="picture"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgPreview"
                >
                  <i class="el-icon-plus avatar-uploader-icon" style="width: 200px; height: 20vh; background-color: #cfcfcf; text-align: center; line-height: 20vh"></i>
                </el-upload>
                <!-- 图片显示对话框 -->
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogUrl" alt="">
                </el-dialog>
              </div>
            </el-form-item>
            <el-form-item label="收录至专栏:">
              <el-select v-model="specialValues"  placeholder="请选择" style="width: 100%">
                <el-option
                    v-for="item in specialOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编辑摘要">
              <el-input v-model="special_description" type="textarea" :rows="5"></el-input>
            </el-form-item>
            <el-form-item label="是否公开">
              <label slot="label"><span style="color: red">* </span>是否公开:</label>
              <el-radio v-model="show_status" :label="0" >公开</el-radio>
              <el-radio v-model="show_status" :label="1" >私密</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: center; margin-top: 5px">
          <!--          todo 调用发布文章接口-->
          <el-button type="primary" @click="saveArticle">确定</el-button>
          <!--          todo 将内容设置为null-->
          <el-button style="margin-left: 40px" @click="cancel">取消</el-button>
        </div>


        <el-button slot="reference"
                   style="margin-left: 10px; border: 1px solid black; border-radius: 30px; height: 50px; width:130px; font-size: 18px;
                        margin-top: 25px; margin-bottom: 20px; background-color: #fc5531; color: #ffffff">发布文章</el-button>
      </el-popover>
    </div>


    <div style="margin-top: 10px; ">
      <mavon-editor ref="md" :ishljs="true" @imgAdd="imgAdd" v-model="content" style="min-height: 75vh; width: 80%; margin-left: 10%"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleUpdate",
  props:{
    article: Object
  },
  components: {
  },
  data(){
    return {
      nickName: '',
      imgUrl: '',
      dialogVisible: false,
      dialogUrl: '',
      title: '【无标题】',
      content: "",
      form: {},
      special_description: "",
      //todo 调用接口 获取后台所有标签
      tagOptions: [],
      tagValues: [],
      specialOptions: [{
        value: '选项1'
      }, {
        value: '选项2'
      }, {
        value: '选项3'
      }, {
        value: '选项4'
      }, {
        value: '选项5'
      }],
      specialValues: [],
      show_status: 0,
    }
  },
  methods:{
    load: function () {
      // 获取请求路径的文章 id
      console.log("id")
      console.log(this.$route.params.id)
      // todo 请求文章信息，填写文章信息
      var article = {}
      this.tagValues = article.tagIds
      this.columIds = []
      this.show_status = article.showStatus
      this.content = article.content
      this.avatar = "https://p.qqan.com/up/2021-6/16246735796128385.png"




      // 调用后端获取所有标签接口
      var requestBody = {
        "currPage": 1,
        "pageSize": 20,
      }
      axios.post("/article/articletag/list", requestBody).then(res => {
        console.log(res)
        var tagList = res.data.page.list;
        console.log(tagList)
        for (var i = 0; i < tagList.length; i++){
          var tag_name = tagList[i].name
          var tag_id = tagList[i].id
          var tagOption = {
            "value": tag_id,
            "label": tag_name
          }
          this.tagOptions.push(tagOption)
        }
        console.log(this.tagOptions)
      })
    },
    imgAdd(pos, $file){
      let $vm = this.$refs.md
      const formData = new FormData();
      formData.append('file', $file);
      axios({
        // todo 填写上传图片接口
        url: '上传图片接口',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        $vm.$img2Url(pos, res.data)
      })
    },
    //图片缩略图
    imgPreview: function(file){
      //生成临时缩略图
      this.imgUrl =  URL.createObjectURL(file.raw);
    },
    enlarge: function(){
      this.dialogVisible = true;
      this.dialogUrl = this.imgUrl;
    },
    del: function(){
      this.imgUrl =  '';
      this.dialogUrl = '';
    },
    updateArticle: function (){
      var requestBody = {
        "id": this.$route.params.id,
        "tagIds": this.tagValues,
        "columnIds": [],
        "showStatus": this.show_status,
        "content": this.content,
        "title": this.title,
        "avatar": "https://p.qqan.com/up/2021-6/16246735796128385.png",
        "coverImag": "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
      }
      console.log(requestBody)
      // todo 调用更新接口
      axios.post("/article/article/update", requestBody).then(res => {
        console.log(res)
      })
    },
    cancel: function () {
      alert("取消发布文章")
    }
  },
  mounted() {
    // this.load()
    this.title = "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长："
    this.content = "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
    "\n" +
    "2\n" +
    "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
    "\n" +
    "3\n" +
    "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
    this.tagValues = ["前端", "后端", "运维"]
  }
}
</script>

<style scoped>
.v-note-wrapper {
  position: relative;
  min-width: 300px;
  min-height: 800px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  z-index: 1500;
  text-align: left;
  border: 1px solid #f2f6fc;
  border-radius: 4px;
}

.monitor-yt-popover .el-popover__title {
  font-weight: bolder;
}
</style>